html, body {
    height: 100%;
    /*background: #6666cc; */
    background-color: rgb(43, 171, 226);
    background-image: url(../img/homepage/newbottom.png);
    background-size: initial;
    background-repeat: repeat-x;
    background-position: center bottom ;
}

h1{
    text-align: center;
    position:absolute;
    left: 45%;
    top: 20%;
    color: white;
    text-shadow: 5px 5px 5px rgb(0, 0, 0);
    font-weight: 700;
    font-size:56px;
    /* font-style: italic; */
    font-family:sans-serif;
    user-select:none;
}
p{
    text-align: center;
    position:absolute;
    left: 30%;
    top: 33%;
    color: white;
    text-shadow: 5px 5px 5px #312d41;
    font-size:30px;
    font-weight: 500;
    user-select:none;

}

.button {
    width: 150px;
    height:60px;
    padding: 15px 32px;
    cursor: pointer;
    background-color: #33cccc;
    font-size: 20px;
    color:rgb(255, 255, 255);
    border-radius: 40px;
    /* border: 2px solid #33cccc;  */
    border: none;
}
.button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}


#button1{
    text-align: center;
    position:absolute;
    left:43%;
    top:48%;
}
.index
{

    color: white;
    position:absolute;
    left: 23%;
    top: 3.7%;

}

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li
{
    float:left;
}
a
{
    color:white;
    display:block;
    width:150px;
    background-color: rgb(43, 171, 226);
    font-weight: 600;
    text-decoration: none;
    user-select:none;
}
a:hover{
    text-decoration: underline;
}
#link{
    position: absolute;
    left: 8.5%;
    top: 1.3%;
    -webkit-user-drag: none;
    user-select:none;
}
.link1{
    color: white;
    font-weight: 900;
    font-size: 25px; ;
    font-family: "Arial";
    font-style:normal;
    position: absolute;
    left: 50%;
    top: 10.3%;
    -webkit-user-drag: none;
    user-select:none;
}
#icon
{
    position: absolute;
    left: 40%;
    top: 27%;
    -webkit-user-drag: none;
    user-select:none;
}
::-webkit-scrollbar{
    display:none;
}


#pic1{
    position: absolute;
    left: 6.6%;
    top: 78%;
    width: 150px;
    height: 73px;
    -webkit-user-drag: none;
    -webkit-animation: mymove 300s infinite; /* Chrome, Safari, Opera */
    animation: mymove 300s infinite;

}
@-webkit-keyframes mymove {
    50% {left: 1360px;}
}

@keyframes mymove {
    50% {left: 1360px;}
}

#pic3{
    position: absolute;
    left: 6.5%;
    top: 64%;
    width: 274px;
    height: 75px;
    -webkit-animation: mymove1 80s infinite; /* Chrome, Safari, Opera */
    animation: mymove1 80s infinite;
    -webkit-user-drag: none;
}
@-webkit-keyframes mymove1 {
    50% {left: 400px;}
}

@keyframes mymove1 {
    50% {left: 400px;}
}
#pic4{
    position: absolute;
    left: 33%;
    top: 64%;
    width: 125px;
    height: 71.5px;
    -webkit-animation: mymove2 80s infinite; /* Chrome, Safari, Opera */
    animation: mymove2 80s infinite;
    -webkit-user-drag: none;
}
@-webkit-keyframes mymove2 {
    50% {left: 800px;}
}

@keyframes mymove2 {
    50% {left: 800px;}
}
#pic5{
    position: absolute;
    left: 46%;
    top: 64%;
    -webkit-user-drag: none;
    height: 371.5px;
    height: 79.5px;
    -webkit-animation: mymove3 80s infinite; /* Chrome, Safari, Opera */
    animation: mymove3 80s infinite;
}
@-webkit-keyframes mymove3 {
    50% {left: 900px;}
}

@keyframes mymove3 {
    50% {left: 900px;}
}
#pic6{
    position: absolute;
    left: 88%;
    top: 64%;
    width: 125.5px;
    height: 72.1px;
    -webkit-user-drag: none;
    -webkit-animation: mymove4 50s infinite; /* Chrome, Safari, Opera */
    animation: mymove4 50s infinite;
}
@-webkit-keyframes mymove4 {
    50% {left: 1400px;}
}

@keyframes mymove4 {
    50% {left: 1400px;}
}
#next{
    position: absolute;
    left: 0px;
    top:101%
}
#next2{
    position: absolute;
    left: 0px;
    top: 200%;
}
#next3{
    position: absolute;
    left: 0px;
    top: 300%;
}
#right{
    position: absolute;
    top: 1.3%;
    left: 91%;
}
#right:hover{
    background-color: rgb(78, 159, 182);
}